<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无标题文档</title>

    <link rel="stylesheet" type="text/css" href="../../bootstrap/frame/bootstrap2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../bootstrap/frame/font-awesome-4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css"
          href="../../bootstrap/frame/bootstrap-table-master/src/bootstrap-table.css">
    <link rel="stylesheet" type="text/css"
          href="../../bootstrap/frame/bootstrap3-editable-1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
    <link rel="stylesheet" type="text/css" href="../../bootstrap/frame/bootstrap-fileinput-master/css/fileinput.css">
    <link rel="stylesheet" type="text/css" href="../../bootstrap/frame/bootstrap2/css/bootstrap.min.css">


    <script src="../../bootstrap/frame/jquery/jquery-3.3.1.js"></script>
    <script src="../../bootstrap/frame/layer/layer.js"></script>
    <script src="../../bootstrap/frame/bootstrap-table-master/src/bootstrap-table.js"></script>
    <script src="../../bootstrap/frame/bootstrap3-editable-1.5.1/bootstrap3-editable/js/bootstrap-editable.js"></script>
    <script src="../../bootstrap/frame/bootstrap-table-master/src/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../../bootstrap/frame/bootstrap-table-master/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
    <script src="../../bootstrap/frame/bootstrap2/js/bootstrap.min.js"></script>
    <style>
        .place{height:40px;background:url(../../images/righttop.gif) repeat-x;}
        .place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;color:#dc4e00;}
        .placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(../../images/rlist.gif) no-repeat right;}
        .placeul li:last-child{background:none;}
        .rightinfo{padding:8px;}
        .tools{clear:both; height:35px; margin-bottom:8px;}
        .toolbar{float:left;}
        .toolbar li{background:url(../../images/toolbg.gif) repeat-x; line-height:33px; height:33px; border:solid 1px #dca571; float:left; padding-right:10px; margin-right:5px;border-radius: 3px; behavior:url(js/pie.htc); cursor:pointer;}
        .toolbar li span{float:left; margin-left:2px; margin-right:5px; margin-top:5px;}

        .formbody{padding:10px 18px;}
        .tabson{margin:18px 0px;}
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".click").click(function() {
                $(".tip").fadeIn(200);
            });

            $(".tiptop a").click(function() {
                $(".tip").fadeOut(200);
            });

            $(".sure").click(function() {
                $(".tip").fadeOut(100);
            });

            $(".cancel").click(function() {
                $(".tip").fadeOut(100);
            });

        });
        //修改
         function  jump() {
            window.location="updateRoomtype.html";
         }
        //删除
        function shanchu() {
            window.location="SelectRoomtype.html";
        }

    </script>

</head>

<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="main.html">首页</a>
        </li>
        <li><a href="#">入住管理</a>
        </li>
        <li><a href="#">入住信息查询</a>
        </li>
    </ul>
</div>
<div class="rightinfo">
    <div class="tools">
        <ul class="toolbar">
            <li><span><img src="../../images/t01.png" /></span>
                <a href="../../ui/room/addRoomtype.html">添加</a>
            </li>

            <li onclick="document.getElementById('form1').submit();">
                <span><img src="../../images/t03.png" /> </span>
                    <a href="../../ui/room/SelectRoomtype.html">删除</a>
            </li>

        </ul>

        <br/>

        <div>
            <table id="page"></table>
            <script>
                $(function () {
                    initTable(1,3);//调用函数，初始化表格
                    $("#remove").on("click", remove);
                });

                function initTable(pageNumber,pageSize) {
                    $('#page').bootstrapTable('destroy'); //先销毁表格
                    $('#page').bootstrapTable({
                        url: '../../roomtype/getRoomType',
                        method: 'get',
                        toolbar: "#toolbar",
                        striped: true, // 是否显示行间隔色 //search : "true",
                        sidePagination: "server",
                        pageNumber: pageNumber, //初始化加载第一页，默认第一页
                        pageList: [5, 10, 20, 30, 40],//可供选择的每页的行数
                        pageSize: pageSize,//初始默认每页行数
                        pagination: true,
                        showRefresh: false,//刷新
                        showPaginationSwitch: false,//是否隐藏分页条
                        showToggle: false, //是否显示详细视图和列表视图的切换按钮
                        // clickToSelect: true,点击选中
                        editable: true,
                        contentType: "application/x-www-form-urlencoded",
                        paginationPreText: "上一页",
                        paginationNextText: "下一页",
                        queryParamsType: "limit",//设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数.
                        sortable: true, // 是否启用排序
                        // queryParams: queryParams, //queryParams为参数设置的函数
                        queryParams: function (params) {
                            return {//这里的params是table提供的
                                pageNum: (params.offset / params.limit) + 1, //当前页面,默认是上面设置的1(pageNumber)
                                pageSize: params.limit, //每一页的数据行数，默认是上面设置的5(pageSize)
                                /* username: $("#searchString_id").val()*/ //这个就是搜索框中的内容，可以自动传到后台，搜索实现在xml中体现
                            };
                        },
                        columns: [
                            {
                                checkbox: true
                            }, {
                                field: 'id',
                                title: '自编号'
                            },{
                                field: 'rid',
                                title: '房间类型编号'
                            },
                            {
                                field: 'type',
                                title: '房间类型'
                            },
                            {
                                field: '',
                                title: '操作',
                                align: 'center',
                                events: operateEvents,//给按钮注册事件
                                formatter: addFunctionAlty//表格中增加按钮
                            }],
                        onLoadSuccess: function () {  //加载成功时执行
                            console.info("加载数据成功");
                        },
                        onLoadError: function () {  //加载失败时执行
                            console.info("加载数据失败");
                        }
                    });
                };

                function addFunctionAlty(value, row, index) { //要进行的操作 操作函数
                    // 修改按钮、删除按钮
                    return [
                        '<button type="button" id="btn_edit" class="btn btn-info" data-toggle="modal" data-target="#ModalInfo" onclick="jump()">修改</button>  ',
                        '<button id="btn_delete" class="btn btn-danger" onclick="shanchu()">删除</button>'
                    ].join('');
                }

                window.operateEvents = {
                    'click #btn_delete': function (e, value, row, index) {
                        /*var arrays = new Array();
                        arrays.push(row.id);
                        console.log(arrays[0]);*/
                        alert(1221212);
                        value=row.rid;
                        $.ajax({
                            url: "../../roomtype/delRT",
                            type: "POST",
                            traditional: true,
                            data: {
                                'rid':value
                            },

                            success: function (data) {
                                alert(1231);
                                console.log("删除成功");
                                console.log(num);
                                initTable(num,size);
                                console.log(data);
                            }
                        })

                    },
                    'click #btn_edit': function (e, value, row, index) {
                        localStorage.setItem('rid',row.rid);
                        window.location = "updateRoomtype.html";
                    }
                }


            </script>

        </div>
       <div class="formbody">
            <div id="usual1" class="usual">
                <div id="tab1" class="tabson">
                    <form method="post" id="form1" action="delallroomtypes.s">
                        <table class="tablelist">

                        </table>
                    </form>


                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>